<template>
	<view class="backgroud-white">
		
			<!-- 标题 -->
			<view style="margin-left: 8px;">
				<uni-title type="h1" :title="detail.name" ></uni-title>
				<text style="color: gray; " >{{sysName.departName}} </text>
				
				<text style="display: inline-block; color:grey; text-indent: 10px; font-size: 16px;"  >{{detail.createTime}} </text>
			</view>
		
		<!-- <view style="margin-left: 6px;">
			<uni-title type="h1" title="募集||大雄宝殿修缮款募集" ></uni-title>
			<text style="color: gray; " >万寿寺 </text>
			<uni-link href="#" text="   万寿寺" fontSize="20px" color="blue" showUnderLine="false"></uni-link>
			<text style="display: inline-block; color:grey; text-indent: 10px; font-size: 16px;"> 2022-05-11</text>
			
		</view> -->
	
		
			
		<!-- 标题图片 -->
		<!-- <view style="width:96%; margin-top: 10px; margin-left: 6px;">
			
			<image :src="apiurl+detail.img" style="width: 100% ; "  mode="aspectFill"></image>
			
			
		</view> -->
		
		
		
		
		
		<view v-if="detail.type==1" style="width: 100%; : center;">
			
			<view>
				<view class="backgroud-white" style="padding-top:10px">
					<uni-section title="基础卡片" type="line">
								<uni-card id="1" title="募集进度" border="true" :is-shadow="true">
									<uni-row>
										<uni-col :span="8">
											<view  class="align-center">
												<view>
													<text class="red">{{toTal.totalMoney!=null ? toTal.totalMoney : 0}}</text>
												</view>
												<view>
													<text>已筹(元)</text>
												</view>
											</view>
										</uni-col>
										<uni-col :span="8">
											<view  class="align-center">
												<view>
													<text class="red">{{detail.targetAmount}}</text>
												</view>
												<view>
													<text>目标(元)</text>
												</view>
											</view>
										</uni-col>
										<uni-col :span="8">
											<view  class="align-center">
												<view>
													<text class="red">{{toTal.totalNumber}}</text>
												</view>
												<view>
													<text>爱心(分)</text>
												</view>
											</view>
										</uni-col>
									</uni-row>
								</uni-card>
							</uni-section>
					
				</view><!--end first-->
				<view class="backgroud-white" style="margin-top: 10px;">
					<!-- 内容 -->
					<view class="" style="display: block; width: 94%; margin-top: 20px;  font-size: 16px; " v-if="detail && detail.isLink=='N'">
						<view class="" style="margin-top: 20px; " v-html="detail.content"></view>
					</view>
					<view v-if="detail && detail.isLink=='Y'">
						<web-view :src="detail.url"></web-view>
					</view>
					
					<!-- <view class="" style="margin-left: 6px;">
						<uni-title type="h2" title="  项目公开" color="rgb(241, 200, 107)" ></uni-title>
					</view> -->
					
				
					<!-- <view >
						<text style="display:inline-block; text-indent: 2em;">募捐编号：202204271</text>
					</view>
					<view>
						<text style="display:inline-block; text-indent: 2em;">项目领域：{{detail.categoryName}}</text>
					</view> -->
				</view><!--end second-->
				<view class="backgroud-white" style="margin-top: 10px;">
					<!-- <view class="" style="margin-left: 6px;">
						<uni-title type="h2" title="项目介绍" color="rgb(241, 200, 107)"></uni-title>
					</view> -->
					
					<view class="" style="width: 100%;display: block;border-left: 10px;">
						<!-- <img src="http://1do-image.oss-cn-hangzhou.aliyuncs.com/onedoo/20161125/20161125111450078913.jpg" alt="" mode="center"> -->
						<!-- <view class="">
							<text style=" display: block; text-align: center; color: rgb(255, 153, 0); font-size: 15px; line-height: 20px;">图说：万寿寺天王殿</text>
						</view> -->
					</view>
					
					<!-- <view class="">
	
						<text style=" display: block; margin-top: 10px;margin-bottom: 10px;margin-left: 10px;    margin-right: 10px; font-size: 17px;  font-family: Arial, Helvetica, sans-serif; line-height: 24px;  "> 天王殿通常为佛寺的第一重殿，两边是威严的四大天王塑像，南方增长天王和东方持国天王，以及北方多闻天王和西方广目天王，他们代表了物质的四种状态“地、水、火、风”，喻意风调雨顺，天王殿由此得名；天王殿中面对山门供奉的是未来佛——弥勒菩萨，他总是笑口常开，这是笑迎外来客；弥勒佛背后面对大雄宝殿的是韦驮菩萨，说明寺院内是有严格规矩的，意为国泰民安。两足平立，肩扛降魔杵，表明此寺院为十方丛林。 \n </text>
					
					</view> -->
					<view class="" style="width: 100%;">
						<!-- <img src="http://1do-image.oss-cn-hangzhou.aliyuncs.com/onedoo/20161125/20161125111433507.jpg" alt="" mode="center"> -->
						<view class="">
							<!-- <text style=" display: block; text-align: center; color: rgb(255, 153, 0); font-size: 15px; line-height: 20px;">图说：万寿寺天王殿</text> -->
						</view>
					</view>
					
					
					<!-- <view  v-html="detail.content"></view> -->
				</view><!--end third-->
				<view class="backgroud-white" style="margin-top: 10px;">
					
					<view class="" style="margin-left: 6px;">
						<uni-title type="h2" title="项目进展" color="rgb(241, 200, 107)"></uni-title>
					</view>
					
					
					<view class="">
					</view>
					<view v-for="(item,index) in newsList" style="margin-left:6px ; margin-bottom:20px">
						<text @click="navTo('/pages/news/detail?id='+item.id)" style="color: blue; ">{{item.title}}</text>
					</view>
				</view><!--end forth-->
				<view style="height: 80px;">&nbsp;</view>
				
			</view>
			
		</view>
		<view v-if="detail.type==2" style="width: 100%;">
			<view class="" style="display: block; width: 94%; margin-top: 20px;  font-size: 16px; " v-if="detail && detail.isLink=='N'">
				<view class="" style="margin-top: 20px; " v-html="detail.content"></view>
			</view>
			<view v-if="detail && detail.isLink=='Y'">
				<web-view :src="detail.url"></web-view>
			</view>
			<view style="height: 80px;">&nbsp;</view>
		</view>
		<!-- 底部操作菜单 -->
		<view class="mix-botoom-operation row">
			<view class="btn-group row">
				<view class="btn center">
					
					<button open-type="share" @click="shareData(detail)" style="width: 100%;background-color: rgba(0,0,0,0.0); font-size: 16px;color: white;">分享</button>
					<!-- <text @click="navTo('/pages/donation/record?id='+detail.id+'&title='+detail.name)">登记记录(已登记{{donationCnt}}人)</text> -->
				</view>
				<view class="btn center" @click="navTo('/pages/donation/donationForm?id='+detail.id+'&typeId='+detail.typeId+'&name='+detail.name+'&img='+detail.img)">
					<text>我要登记</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				apiurl:'',
				id:"",
				detail:null,
				compnay:'',
				newsList:[],
				donationCnt:0,
				share:{},
				toTal:null,
				sysName:null,
				
			}
		},
		onLoad:function(option){
			
			 this.apiurl = getApp().globalData.staticUrl
		     this.id = option.id
		     uni.setNavigationBarTitle({
		         title:option.title
		     })
			 this.$http.get('/temple.donation/templeDonation/api/queryById?id='+this.id, {}).then((res) => {
			 	//this.list = res.data.result.records;
				this.detail = res.data.result
				console.log(this.detail)
				var that = this
				this.$http.get('/temple.donation/templeDonationCategory/api/queryById', {
					'id':that.detail.categoryId
				}).then((res) => {
					this.$set(that.detail,'categoryName',res.data.result.name)
				})
				this.$http.get('/temple.donation/templeDonationType/api/queryById', {
					'id':that.detail.typeId
				}).then((res) => {
					this.$set(that.detail,'type',res.data.result.type)
				})
				let ids = this.detail.newsList.split(",")+','
				this.$http.get('/temple.news/templeNews/api/list', {
					'id':ids
				}).then((res) => {
					console.log(res)
					this.newsList =res.data.result.records
				})
				this.$http.get('/temple.order/templeDonationOrder/api/count', {
					'donationId':this.id
				}).then((res) => {
					this.donationCnt = res.data.result
				})
				this.$http.get('/temple.donation/templeDonation/api/queryByIdTotal',{
					'id':this.id
				}).then((res)=>{
					this.toTal=res.data.result
				})
				 
				this.$http.get('/sys/sysDepart/api/queryDepartById',{'orgCode':getApp().globalData.orgCode}).then((res)=>{
					this.sysName=res.data.result
				})
				
			 })
			 
			 
			 
		},
		methods: {
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			weixinShare(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			shareData(item){
				this.share.title = item.name
				this.share.path  = '/pages/donation/detail?id='+item.id+'&title='+item.name
				this.share.imageUrl  = this.apiurl+item.img
				console.log(this.share.imageUrl)
			}
		}
		
		
	}
</script>

<style scoped lang='scss'>
	.uni-row{
		margin-bottom: 5px;
	}
	/* 底部菜单栏 */
	.mix-botoom-operation {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 90;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, .1);
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.nav-group {
		padding-left: 6rpx;
	
		.nav {
			width: 90rpx;
			height: 80rpx;
			color: #333;
			position: relative;
	
			&.active {
				color: $base-color;
			}
		}
	
		.tit {
			font-size: 20rpx;
		}
	
		.mix-icon {
			height: 48rpx;
			line-height: 48rpx;
			font-size: 38rpx;
			margin-bottom: 6rpx;
		}
	
		.number {
			position: absolute;
			right: 16rpx;
			top: 2rpx;
			min-width: 24rpx;
			height: 24rpx;
			padding: 0 8rpx;
			font-size: 16rpx;
			color: #fff;
			background-color: $base-color;
			border-radius: 100rpx;
		}
	}
	
	.btn-group {
		flex: 1;
		margin: 0 16rpx 0 14rpx;
		overflow: hidden;
	
		.btn {
			flex: 1;
			height: 76rpx;
			font-size: 30rpx;
			color: #fff;
			
			background-color: orange;
	
			&:last-child {
				width: 70%;
				background-color: $base-color;
			}
		}
	}
	
	.ysc {
		color: $base-color;
	}
</style>
